class Enlarge{
    constructor(el){
        this.el=document.querySelector(el)
        this.imgObj=this.el.querySelector('.img')
        this.maskObj=this.el.querySelector('.mask')
        this.enlargeObj=this.el.querySelector('.enlarge')
        this.init()
    }
    init(){
        this.overOut()
        this.maskMove()
        this.tbEnlarge()
    }

    overOut(){
        this.imgObj.onmouseover = () => this.maskObj.style.display = this.enlargeObj.style.display =  'block'
        this.imgObj.onmouseout = () => this.maskObj.style.display = this.enlargeObj.style.display =  'none'
    }

    maskMove(){
        this.imgObj.onmousemove=(evt)=>{
            let e=evt||window.event
            let left = e.pageX - this.imgObj.offsetLeft - this.maskObj.offsetWidth/2
            let top = e.pageY - this.imgObj.offsetTop  - this.maskObj.offsetHeight/2
            if(left<0) left=0
            if(top<0) top=0
            let maxLeft=this.imgObj.offsetWidth-this.maskObj.offsetWidth
            let maxTop=this.imgObj.offsetHeight-this.maskObj.offsetHeight
            if(left>maxLeft) left=maxLeft
            if(top>maxTop) top=maxTop
            this.maskObj.style.left=left+'px'
            this.maskObj.style.top=top+'px'

            this.tbEnlarge(left,top)
        }
    }

    tbEnlarge(left,top){
        this.enlargeObj.style.backgroundPosition=`-${left*2}px -${top*2}`
    }
}